<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dojo, javascript, integration, colortool, color picker, fubar_perl" />
<meta name="description" content="Color selection using a simple javascript program and Dojo integration!" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="distribution" content="Global" />
<meta name="author" content="Dwight Vietzke" />
<meta http-equiv="Reply-to" content="dwight_vietzke@yahoo.com" />
<meta name="classification" content="mobile internet website software" />
<meta name="copyright" content="Copyright©2008-2009 - OpenSiteMobile" />

	<title>Color Selection Tool</title>

<script type="text/javascript" charset='utf-8' src="./msos/dojo_config.js"></script>
<script type="text/javascript" charset='utf-8' src="./dojo/dojo.js"></script>

<script type='text/javascript'>
/* <![CDATA[ */

dojo.require("msos.common");
dojo.require("msos.colortool");
dojo.require("msos.validate");


//  Initialize some global variables

var Colour = {
    store_accent1 :    '#F08080',
    store_accent2 :    '#F7BC83',
    store_accent3 :    '#FF8429',
    store_bgcolor :    '#BFBFBF',
    store_contrast1 :  '#FFFFFF',
    store_contrast2 :  '#F0F0F0',
    store_contrast3 :  '#E0E0E0',
    store_http_link :  '#FF8429',
    store_active_link :'#F0F0F0',
    store_visit_link : '#EDAF85',
    store_hover_link : '#F7BC83',
    store_font_color : '#000000'
};

var Target = 'store_bgcolor';

function InitPage() {

    var ct_input_obj = null;
    var ct_input_elm = dojo.byId('text_input_1');
    var ct_input_div = dojo.byId('color_input_div');

    // Set our input start value
    ct_input_elm.value = Colour[Target];
    ct_input_div.style.backgroundColor = Colour[Target];
    dojo.byId(Target).checked = true;

    var pass_query = get_query_string();
    if (pass_query) { pass_query = '?' + pass_query; }

    var set_field = function(evt) {
	Target = evt.target.id;
	if (ct_input_obj)	{ ct_input_obj.set_hex_color(Colour[Target]);	}
	else			{ ct_input_elm.value = Colour[Target];		}

	ct_input_div.style.backgroundColor = Colour[Target];
    }

    //dojo.query("input[type=radio]").onclick(set_field);   // Works in FF, not Opera
    for (var inp_id in Colour) {
	dojo.connect(dojo.byId(inp_id), 'onclick', null, set_field)
    }

    if (msos.common.browser_current()) {

	ct_input_obj = new msos.colortool.generate_tool(ct_input_elm);
	ct_input_obj.ct_path = './colortool.html' + pass_query;
        ct_input_obj.ct_indicate_color = true;
        ct_input_obj.after_change_function = function (ct_object) {
	    Colour[Target] = '#' + ct_object.ct_color;
	    ct_input_div.style.backgroundColor = Colour[Target];
	    // Default colortool 'after_change_function'
	    msos.colortool.close(ct_object);
	};

	// Add our colortool button to the page
	ct_input_obj.ct_generate_button();

	// This section is useful for testing and demo purposes.
	var config_ul = dojo.byId('configuration');
	config_ul.innerHTML = '';	// Clear na ref (for valid xhtml)
	for (var parm in djConfig) {
	    if (typeof(djConfig[parm]) == 'boolean') {
		var list_elm   = document.createElement("li");
		var inpt_elm_t = document.createElement("input");
		var inpt_elm_f = document.createElement("input");
		inpt_elm_t.type = "radio";
		inpt_elm_f.type = "radio";
		inpt_elm_t.name = parm;
		inpt_elm_f.name = parm;
		inpt_elm_t.value = 'true';
		inpt_elm_f.value = 'false';
		if (djConfig[parm])	inpt_elm_t.checked = true;
		else			inpt_elm_f.checked = true;
		var true_txt = document.createTextNode('T ');
		var list_txt = document.createTextNode('F ' + parm); 
		list_elm.appendChild(inpt_elm_t);
		list_elm.appendChild(true_txt);
		list_elm.appendChild(inpt_elm_f);
		list_elm.appendChild(list_txt);
		config_ul.appendChild(list_elm);
	    }
	}

	// Set current language in menu (testing and demo purposes)
	msos.common.set_select_menu(dojo.byId('select_language'),  djConfig.locale);

    } else {
	
	ct_input_elm.onblur = function () {
	    if (!msos.validate.check_hex_color(this.value)) {
		alert('"' + this.value + '" - ???');
		dojo.byId(Target).checked = true;
		ct_input_elm.focus();
		return false;
	    } else {
		Colour[Target] = this.value;
		ct_input_div.style.backgroundColor = Colour[Target];
	      }
	};
      }
}


// Initiate the colortool button
dojo.addOnLoad(InitPage);

/* ]]> */
</script>

<link rel='stylesheet' type='text/css' charset='utf-8' href="./msos/style/fubar.css" media='screen, handheld' />
<link rel='shortcut icon' href='./msos/images/osm.ico' />

<style type="text/css">
/* <![CDATA[ */

div#color_input_div {
    width:120px;
    height:20px;
    padding:4px;
}

ul#language option {
    width:20px;
    text-align:center;
}

/* ]]> */
</style>

</head>
<body>

<div id='body'>

<div class='marquee'>
    <img id='osm_logo_small' src='./msos/images/osm_logo_sml.jpg' class='marquee_img' alt="OpenSiteMobile" />
</div>

<div class='header'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<h1 title='Select the HTML element or stylesheet color group you want to modify'>CSS Color Elements</h1>

<form id='css_colors' accept-charset='utf-8' action=''>
<table class='float_table'><tr>
<td class='text_lt'><input type='radio' name='color_target' id='store_bgcolor' />background</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_font_color' />font</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_http_link' />a:link</td></tr><tr>
<td class='text_lt'><input type='radio' name='color_target' id='store_visit_link' />a:visited</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_active_link' />a:active</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_hover_link' />a:hover</td></tr><tr>
<td class='text_lt'><input type='radio' name='color_target' id='store_accent1' />accent1</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_accent2' />accent2</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_accent3' />accent3</td></tr><tr>
<td class='text_lt'><input type='radio' name='color_target' id='store_contrast1' />contrast1</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_contrast2' />contrast2</td>
<td class='text_lt'><input type='radio' name='color_target' id='store_contrast3' />contrast3</td>
</tr></table>

<h2 title='Click the button on the right to access our color selection tool'>Color Tool</h2>

<div id='color_input_div'><input type='text' id='text_input_1' maxlength='7' size='9' /> </div>
</form>

<noscript>
<h2><span class='alert'>Your browser&#39;s JavaScript compiler is turned off or isn&#39;t available.</span></h2>

<p>This page requires that Javascript be enabled in order to function properly!</p>
</noscript>

<p>
    This page is used to test our color selection tool. Change parameters below and reset the page
    to see their effect.
</p>

<h3>Page Testing</h3>

<form accept-charset='utf-8' action='color_select.html' method='get'>
<div class='list_large'>

<ul id='language'>
<li><select id='select_language' name='locale'>
    <option value='ar'> ar </option>
    <option value='ca'> ca </option>
    <option value='cs'> cs </option>
    <option value='da'> da </option>
    <option value='de'> de </option>
    <option value='el'> el </option>
    <option value='en'> en </option>
    <option value='es'> es </option>
    <option value='fi'> fi </option>
    <option value='fr'> fr </option>
    <option value='he'> he </option>
    <option value='hu'> hu </option>
    <option value='it'> it </option>
    <option value='ja'> ja </option>
    <option value='ko'> ko </option>
    <option value='nb'> nb </option>
    <option value='nl'> nl </option>
    <option value='pl'> pl </option>
    <option value='pt'> pt </option>
    <option value='ru'> ru </option>
    <option value='sk'> sk </option>
    <option value='sl'> sl </option>
    <option value='sv'> sv </option>
    <option value='th'> th </option>
    <option value='tr'> tr </option>
    <option value='zh'> zh </option>
</select> Language</li>
</ul>

<ul id='configuration'><li>Not Available</li></ul>

<input type="submit" value="Reset Page" />

</div>
</form>

<h3>Reference:</h3>

<div class='list_small'>
<ul>
    <li><a href='./msos/common.js'>msos.common</a></li>
    <li><a href='./msos/colortool.js'>msos.colortool</a></li>
    <li><a href='./msos/colortool_calc.js'>msos.colortool_calc</a></li>
</ul>
</div>

<h3 title='Rate our script at HotScript!'> OSM Colortool [<a href="http://www.hotscripts.com/rate/88585.html" title='Rate our program'>rate</a>]</h3>

<div class='footer'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<div id='copyright'>
<span class='no_br'>Powered by:
   <a href='http://www.opensitemobile.com'>
  <span class='bold_text' title="Copyright©2008-2009 OpenSiteMobile - All rights reserved">MobileSiteOS</span></a>™</span>
</div>

</div> <!-- end 'body' div -->

</body>
</html>

